<template>
	<el-container>
		<el-header>
			<Header />
		</el-header>
		<el-container>
			<el-aside width="20%">
				<LeftMenu />
			</el-aside>
			<el-main style="position: relative">
				<MiddleEditor />
			</el-main>
			<el-aside width="20%">
				<RightOperation />
			</el-aside>
		</el-container>
	</el-container>
</template>

<script>
	import fs from 'fs'
	import JSZip from 'jszip'
	import Header from './layout/Header.vue'
	import Footer from './layout/Footer.vue'
	import LeftMenu from './layout/LeftMenu/index'
	import MiddleEditor from './layout/MiddleEditor/index'
	import RightOperation from './layout/RightOperation/index'
	const compiler = require('vue-template-compiler')
	console.log(compiler)
	var res = compiler.compile('<div><span>{{ msg }}</span></div>')
	export default {
		components: {
			Header,
			Footer,
			LeftMenu,
			MiddleEditor,
			RightOperation
		},
		data() {
			return {
				 msg: 'hello'
			}
		},
		render:res.render,
		created() {
			console.log(res)
			// this.createZip()
		},
		methods: {
			createZip() {

				const zip = new JSZip();
				// let file = fs.readFileSync('@/frameTemplate/uViewUI.zip')
				// console.log(file)

				// let file = '@/static/hello.txt'
				// zip.file(file, "Hello World\n");
				// zip.file("nested/hello.txt", "Hello World\n");
				// zip.folder("nested").file("hello.txt", "Hello World\n");
				// zip.file(file).async("string").then(function(data) {
				// console.log(data)
				// });
				// zip.remove("nested/hello.txt");
				// zip.remove("nested");
				// if (zip.support.uint8array) {
				// 	promise = zip.generateAsync({
				// 		type: "uint8array"
				// 	});
				// } else {
				// 	promise = zip.generateAsync({
				// 		type: "string"
				// 	});
				// }
				// zip.loadAsync(content).then(function(zip) {
				// 	zip.file("hello.txt").async("string");
				// });
			},
			unZip() {

			},
			async getZipFiles (zipUrl) {
			    // loadAsync加载其他类型资源会出问题，比如资源乱码  
				const zipData = await jszip.loadAsync(response.data);  
				return zipData.files;
					
			},
		},
	}	
</script>

<style lang="scss">
	.el-header {
		padding: 0;
		background-color: white;
		color: #333;
		text-align: center;
		border-bottom: #c8c7cc solid 1px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		z-index: 100;
	}

	.el-aside {
		background-color: white;
		color: #333;
		text-align: center;
		height: calc(100vh - 60px);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		z-index: 99;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		height: calc(100vh - 60px);
		width: 60%;
		background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0), linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
		background-size: 20px 20px;
		background-position: 0 0, 10px 10px;
	}
</style>
